/**
 * 1. 组件的样子
 * 2. 组件的功能与数据
 *    state 数据
 *    props 数据
 *    1. 调接口获取数据，数据直接存放在 state 上
 *    2. 当前高亮显示的 activeKey 存放在 props 上，由父组件传递下来
 */
import { FC, Dispatch, SetStateAction } from "react";
import { Tabs } from "antd-mobile";
import { useRequest } from "ahooks";
import { getCategoryList } from "@/api/product";

type Props = {
  activeKey: string;
  setActiveKey: Dispatch<SetStateAction<string>>;
};

const CategoryList: FC<Props> = ({ activeKey, setActiveKey }) => {
  const { data } = useRequest(() => getCategoryList(), {
    // 请求成功
    onSuccess(data) {
      // console.log("接口请求完成", data);
      if (!activeKey) {
        setActiveKey(data.classList[0].classId);
      }
    },
  });

  return (
    <Tabs activeKey={activeKey} onChange={setActiveKey}>
      {data?.classList.map((item) => (
        <Tabs.Tab title={item.className} key={item.classId} />
      ))}
    </Tabs>
  );
};

export default CategoryList;
